<!-- 领取企业团购页面 -->
<template>
  <div class="c-bg-sgray c-pt40 c-p">
    <div class="top-shape-out c-flex-row c-flex-center">
      <div class="top-shape-in"></div>
    </div>
    <div v-if="groupPurchaseInfo" class="c-ww592 c-bg-white c-pt40 c-pb34 c-ph24 c-br32 c-m-0auto c-p c-pz1">
      <div class="c-fs28 c-fc-xblack c-fw600 c-textAlign-c c-hh64 c-bd-db1-mgray">您有一张课程券可领取</div>
      <div class="c-pb44 c-bd-db1-mgray">
        <div class="c-ww520 c-mt30 c-m-0auto">
          <div class="c-w100 c-hh340 c-br8 c-mb30">
            <vip-custom-img v-if="groupPurchaseInfo.prodInfo.avatar && (groupPurchaseInfo.prodInfo.avatar.coverType == 1 || groupPurchaseInfo.prodInfo.avatar.coverType == 2)" :cover="groupPurchaseInfo.prodInfo.avatar" :imgClass="'c-w100 c-h c-br8'" :hasText="false" />
            <img v-else :src="$addXossFilter(groupPurchaseInfo.prodInfo && groupPurchaseInfo.prodInfo.avatar ? groupPurchaseInfo.prodInfo.avatar : require('@/assets/defult270.png'))" alt="" class="c-w100 c-h c-br8">
          </div>
          <p class="c-fs26 c-fc-xblack c-fw600 c-mb12 minh48 c-text-ellipsis2">{{groupPurchaseInfo.prodInfo && groupPurchaseInfo.prodInfo.name ? groupPurchaseInfo.prodInfo.name : ''}}</p>
          <div class="c-flex-row c-justify-sb c-mb12 c-aligni-end">
            <div class="c-fc-xmlred c-fs32"><span class="c-fs24">¥</span>{{groupPurchaseInfo.prodInfo && groupPurchaseInfo.prodInfo.price ? groupPurchaseInfo.prodInfo.price : ''}}</div>
            <div class="c-fc-sblack c-fs24">x1</div>
          </div>
          <p class="c-fs24 c-fc-sblack">有效期：{{groupPurchaseInfo.prodInfo && groupPurchaseInfo.prodInfo.expireTime ? groupPurchaseInfo.prodInfo.expireTime : ''}}</p>
        </div>
      </div>
      <div class="c-pt30 c-p">
        <div class="c-ww28 c-hh28 c-bg-sgray c-br28 c-pa dot-left"></div>
        <div class="c-ww28 c-hh28 c-bg-sgray c-br28 c-pa dot-right"></div>
        <div v-if="groupPurchaseInfo.hasPermission == 1 && groupPurchaseInfo.prodInfo.prodType != 1 && groupPurchaseInfo.prodInfo.prodType != 23" @click="goCourse" class="c-ww520 c-hh64 c-fs26 c-fw600 c-fc-white c-br32 c-flex-row c-flex-center theme-bg c-m-0auto">已有权限，立即观看</div>
        <div v-else-if="groupPurchaseInfo.hasPermission == 1 && (groupPurchaseInfo.prodInfo.prodType == 1 || groupPurchaseInfo.prodInfo.prodType == 23)" class="c-ww520 c-hh64 c-fs26 c-fw600 c-fc-white c-br32 c-flex-row c-flex-center c-bg-ccc c-m-0auto">您已经有相关权限，不需再领取啦！</div>
        <div v-else-if="groupPurchaseInfo.canReceive == 0 && groupPurchaseInfo.isSelfReceive == 0" class="c-ww520 c-hh64 c-fs26 c-fw600 c-fc-white c-br32 c-flex-row c-flex-center c-bg-ccc c-m-0auto">票券已被领取</div>
        <template v-else>
          <div v-if="groupPurchaseInfo.isSelfReceive == 0" @click="getGpTicket" class="c-ww520 c-hh64 c-fs26 c-fw600 c-fc-white c-br32 c-flex-row c-flex-center theme-bg c-m-0auto">领取票券</div>
          <div v-if="groupPurchaseInfo.isSelfReceive == 1" @click="goCourse" class="c-ww520 c-hh64 c-fs26 c-fw600 c-fc-white c-br32 c-flex-row c-flex-center theme-bg c-m-0auto">{{groupPurchaseInfo.prodInfo.prodType == 1 || groupPurchaseInfo.prodInfo.prodType == 23 ? '查看详情' : '观看课程'}}</div>
          <div v-if="groupPurchaseInfo.isSelfReceive == 1" @click="goGetRecord" class="c-m-0auto c-mt24 c-flex-row c-flex-center">
            <span class="c-fs24 c-fc-gray">领取记录</span>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
import { goDetails } from "@/utils/goDetails.js";
import VipCustomImg from "@/components/templates/common/VipCustomImg.vue";
export default {
  name: "GetGroupPurchase",
  components: {
    VipCustomImg
  },
  data() {
    return {
      orderId: 0,
      receiveId: 0,
      groupPurchaseInfo: ''
    };
  },
  created() {
    utilJs.appShare(this);
  },
  watch: {
  },
  mounted() {
    setDocumentTitle("我的票券");// eslint-disable-line
    this.orderId = this.$route.query.orderId;
    this.receiveId = this.$route.query.receiveId;
    this.getGroupPurchaseInfo();
    this.wechatShare();
  },
  methods: {
    goCourse() {
      goDetails(this, this.groupPurchaseInfo.prodInfo.prodType, this.groupPurchaseInfo.prodInfo.prodId, '', this.groupPurchaseInfo.prodInfo.courseType)
    },
    getGpTicket() {
      let postData = {
        receiveId: this.receiveId,
        orderId: this.orderId
      }
      utilJs.postMethod(`${global.apiurl}enterpriseGroup/receive`, postData, res => {
        this.groupPurchaseInfo.isSelfReceive = 1;
        this.$showCjToast({
          text: "领取成功",
          type: "success"
        });
      });
    },
    goGetRecord() {
      this.$routerGo(this, "push", {path: '/member/presentCourse/presentCourseList'});
    },
    getGroupPurchaseInfo() {
      utilJs.getMethod(`${global.apiurl}enterpriseGroup/shareProdInfo?orderId=${this.orderId}&receiveId=${this.receiveId}`, res => {
        this.groupPurchaseInfo = res;
      });
    },
    //分享
    wechatShare: function () {
      utilJs.wechatConfig("", "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      utilJs.appShareTrue("", "", "", "");
    },
  },
  activated() {
  },
  deactivated() {
  }
};
</script>
<style scoped>
.c-ww390 {
  width: 9.75rem;
}
.ticket-bg {
  background: url("../../../assets/i/wap/activity/ticket_bg_w.png");
  background-size: 100% 100%;
}
.minh48 {
  min-height: 1.2rem;
}
.dot-left {
  top: -0.35rem;
  left: -1rem;
}
.dot-right {
  top: -0.35rem;
  right: -1rem;
}
.top-shape-out {
  width: 15.25rem;
  height: 0.75rem;
  border-radius: 0.4rem;
  background: #E5E5E5;
  position: absolute;
  top: 0.625rem;
  left: 0.375rem;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}
.top-shape-in {
  width: 14.85rem;
  height: 0.35rem;
  border-radius: 0.2rem;
  background: #ccc;
}
</style>


